<template>
  <div>
    <el-card class="modifypwd_box">
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/userpi' }">个人主页</el-breadcrumb-item>
          <el-breadcrumb-item>修改密码</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form :model="modifypwdRuleForm" status-icon :rules="modifypwdRules" ref="modifypwdRef" label-width="100px" class="modifypwd_main">
        <el-form-item label="原来的密码" prop="userPass">
          <el-input v-model="modifypwdRuleForm.userPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新的密码" prop="newPass">
          <el-input type="password" v-model="modifypwdRuleForm.newPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPass">
          <el-input type="password" v-model="modifypwdRuleForm.confirmPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="putmodifypwd">修改</el-button>
          <el-button @click="resetForm('modifypwdRef')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    var oldpassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('原密码不能为空'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.modifypwdRuleForm.confirmPass !== '') {
          this.$refs.modifypwdRef.validateField('confirmPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.modifypwdRuleForm.newPass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      modifypwdRuleForm: {
        userPass: '',
        newPass: '',
        confirmPass: ''
      },
      modifypwdRules: {
        userPass: [
          { validator: oldpassword, trigger: 'blur' }
        ],
        newPass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        confirmPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 退出功能
    async loginOut() {
      const res = await this.$http.post('/logout')
      if (res.status !== 200) {
        this.$message({
          showClose: true,
          message: '退出失败！',
          type: 'error'
        })
      }
      this.$message({
        showClose: true,
        message: '退出成功！',
        type: 'success'
      })
      window.sessionStorage.clear()
      this.$router.push('/mylogin')
    },
    // 修改密码
    putmodifypwd() {
      this.$refs.modifypwdRef.validate(async (valid) => {
        if (!valid) return
        var that = this
        const formdata = this.$qs.stringify(this.modifypwdRuleForm)
        // console.log(formdata)
        await this.$http({
          method: 'put',
          url: '/users/password',
          data: formdata
        }).then((res) => {
          that.$message({
            showClose: true,
            message: res.data.message + '!',
            type: 'success'
          })
          that.loginOut()
        }).catch((error) => {
          that.$message({
            showClose: true,
            message: error.response.data.message + '!',
            type: 'error'
          })
        })
      })
    },
    // 重置密码表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
.modifypwd_box {
  width: 100%;
}
.modifypwd_main {
  margin: 20px auto;
  width: 480px;
}
</style>
